<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    

  </div>
   <button id="btn">点击销毁</button>
 
<script src="./vue.js"></script>
<script>
  // vue.extend 可以使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

    // data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
    let Car=Vue.extend({
        props:["myname"],
        template:`
          <div>
             <p @click="say">{{msg}} {{myname}}</p>
              <p>{{txt}}</p>
                <button  @click="forec">强制更新组件</button>
          </div>
        `,
        data(){
          return {
             msg:"你好",
             txt:"世界",
             obj:{
              kk:{
                one:"22"
              }
             }
          }
        },
        methods:{
          say(){
            alert('1')
          },
          forec(){
              //  this.$forceUpdate()
        // 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
            console.log("1111")
            this.obj.kk.two="23"
            // 解决vue2的对象和数组新增属性 页面无法及时响应是问题 this.$set   this.$forceUpdate()
             this.$forceUpdate()
          }
        },
        created(){
          console.log("组件创建")
        },
        mounted(){
           console.log("组件渲染完成")
        },
        update(){
          console.log("组件更新")
        },
        destroyed() {
          console.log("组件被销毁")
        },
    })

    // $mount("") 组件挂载方法
      let vm=new Car({
        //propsData是 vue.extend实例化组件 进行给props传参
        propsData:{
          myname:"周星驰"
        }
      })
      vm.$mount("#app")
    
    // 销毁组件$destory()
    let btn=document.getElementById("btn")
    btn.onclick=function () {
        vm.$destroy();
    }
  
    


    
  



  







</script>
</body>
</html>